<template>
  <div>
    <div id="course_list">
      <el-menu mode="vertical">
        <ul class="infinite-list" style="overflow:auto; height: 1000px; list-style: none; padding-inline-start: 0">
          <li class="infinite-list-item" v-for="(course, index) in courses_teach_by_someone" :key="index" >
            <el-submenu :index="course.index" v-show="course.have_this_course_class">
              <template slot="title">{{course.course_name}}</template>
              <el-menu-item :index="c.index" v-for="(c, index) in course.have_this_course_class" :key="index" @click="toReCall(c.class_id, course.course_id)">
                {{c.class_name}}
              </el-menu-item>
            </el-submenu>
          </li>
        </ul>
      </el-menu>
    </div>
    <div id="student_list">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import {mapActions, mapState} from 'vuex'
  export default {
    computed: {
      ...mapState(['courses_teach_by_someone'])
    },
    mounted() {
      this.$store.dispatch('get_courses_info')
    },
    methods: {
      toReCall(class_id, course_id) {
        this.$store.dispatch('clear_some_data')
        this.$store.dispatch('set_record_class', class_id)
        this.$store.dispatch('set_record_course', course_id)
        this.$router.push({
          path: '/teacher/BContent/ReRecord',
          query: {
            class_id,
            course_id
          }
        })
      }
    }
  }
</script>

<style scoped>
  #course_list {
    width: 20%;
    height: 1000px;
    float: left;
  }
  #student_list {
    width: 80%;
    float: left;
    height: 1000px;
  }
</style>
